import React, { Component, Fragment } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button,
  Menu,
  Dropdown,
  Icon,
  Row,
  Col,
  Steps,
  Card,
  Popover,
  Badge,
  Table,
  Tooltip,
  Divider,
} from 'antd';
import classNames from 'classnames';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';



const { Description } = DescriptionList;

const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;





@connect(({ channelStatistics, loading }) => ({
  channelStatistics,
  loading: loading.models.channelStatistics,
}))
export default class ChannelDetail extends Component {
  state = {
    operationkey: 'tab1',
    stepDirection: 'horizontal',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'channelStatistics/fetchDayChannel',
      payload:{
        ...{channelId: sessionStorage.getItem('channelId')}
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
    this.setStepDirection.cancel();
  }



  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  render() {
    const { channelStatistics:{dayChannelData}, loading } = this.props;

  const colums = [
    {
      title: '注册时间',
      dataIndex: 'createtime',
      key: 'createtime',
    },
    {
      title: '注册量',
      dataIndex: 'registerNum',
      key: 'registerNum',
    },
    {
      title: '放款量',
      dataIndex: 'paymentNum',
      key: 'paymentNum',
    },

  ]
    return (
      <PageHeaderLayout
        title="渠道统计"
      >
        <Card title="" style={{ marginBottom: 24 }} bordered={false}>
          <Table
            columns={colums}
            dataSource={dayChannelData}
          />
        </Card>

      </PageHeaderLayout>
    );
  }
}
